<script lang="ts" setup>
const items = [
  '服务中心查询及预约',
  '查找线下体验店',
  '保障服务',
  '寄修服务',
  '联系我们',
  '发现更多服务',
]
</script>

<template>
  <div class="flow-root">
    <div class="content_support _pc-1312-content">
      <h2 class="text-2xl lg:text-[clamp(1.5rem,0.9273rem+0.8949vw,2rem)]">服务与支持</h2>

      <ul class="mt-[1rem] lg:w-[clamp(38.5rem,28.0481rem+16.3311vw,47.625rem)]">
        <li
          v-for="i in items"
          :key="i"
          class="flex text-base py-[1rem] justify-between cursor-pointer _hover lg:py-[clamp(1rem,0.4273rem+0.8949vw,1.5rem)] lg:pr-[clamp(1rem,0.0694rem+1.4541vw,1.8125rem)]"
          style="border-bottom: 1px solid #f0f0f0"
        >
          <div class="relative">
            <p>{{ i }}</p>
            <span class="_line"></span>
          </div>
          <svg class="w-[1.5rem] aspect-square">
            <use href="#icon-com-arrow-right-guide" />
          </svg>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.content_support {
  @apply my-[3rem] lg:my-[clamp(3rem,0.7092rem+3.5794vw,5rem)]
  lg:flex lg:justify-between lg:items-baseline;

  ._hover {
    span._line {
      @apply absolute w-full h-[1px] bg-[#000000f2] bottom-0 origin-bottom-left;
      transform: scaleX(0);
      transition: transform 0.23s cubic-bezier(0.48, 0.04, 0.52, 0.96);
    }

    svg {
      transition: transform 0.23s cubic-bezier(0.48, 0.04, 0.52, 0.96);
    }

    &:hover {
      span._line {
        transform: scaleX(1);
      }
    }

    &:hover {
      svg {
        transform: translateX(8px);
      }
    }
  }
}
</style>
